<template>
  <div>
    <el-dialog :visible.sync="visiabledialog" :before-close="handleClickCancel" title="订单详情" width="580px">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="详情" name="1">
          <el-form :model="dialogData">
            <el-form-item :label-width="formLabelWidth" label="购买者">
              <el-input :disabled="true" v-model="dialogData.userName" style="width:350px;"/>
              <el-button type="text" @click="handleClickPush(dialogData.id)">个人主页</el-button>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="订单号">
              <el-input :disabled="true" v-model="dialogData.sn" style="width:350px;"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="订单状态">
              <el-input :disabled="true" v-model="dialogData.status" style="width:350px;"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="商品名称">
              <el-input :disabled="true" v-model="dialogData.targetName" style="width:350px;"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="商品价格">
              <el-input :disabled="true" v-model="dialogData.totalPrice" style="width:350px;"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="订单价格">
              <el-input :disabled="true" v-model="dialogData.amount" style="width:350px;"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="创建时间">
              <el-input :disabled="true" v-model="dialogData.createTimeTimeStr" style="width:350px;"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="退款有效期">
              <el-input :disabled="true" v-model="dialogData.refundEndTimeTimeStr" style="width:350px;"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="关闭时间">
              <el-input :disabled="true" v-model="dialogData.endTimeTimeStr" style="width:350px;"/>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!--<el-tab-pane label="日志" name="2">-->
          <!--<div v-if="activeName === '2'">-->
            <!--<el-table :data="dialogData.tableData" stripe style="width: 100%">-->
              <!--<el-table-column prop="log" label="日志信息" min-width="20">-->
                <!--<template slot-scope="scope">-->
                  <!--<span>{{ scope.row.message }}</span>-->
                <!--</template>-->
              <!--</el-table-column>-->
              <!--<el-table-column prop="name" label="操作人" min-width="20">-->
                <!--<template slot-scope="scope">-->
                  <!--<span>{{ scope.row.userName }}</span>-->
                <!--</template>-->
              <!--</el-table-column>-->
              <!--<el-table-column prop="ip" label="IP" min-width="20" >-->
                <!--<template slot-scope="scope">-->
                  <!--<span>{{ scope.row.ip }}</span>-->
                <!--</template>-->
              <!--</el-table-column>-->
              <!--<el-table-column prop="createTime" label="创建时间" min-width="20" >-->
                <!--<template slot-scope="scope">-->
                  <!--<span>{{ scope.row.createTimeTimeStr }}</span>-->
                <!--</template>-->
              <!--</el-table-column>-->
            <!--</el-table>-->
          <!--</div>-->
        <!--</el-tab-pane>-->
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    visiabledialog: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formLabelWidth: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
      activeName: '1'
    }
  },
  methods: {
    // 向父组件事件changeVisiable和布尔值false 父组件用@changeVisiable接收事件 并触发父组件的一个函数 @changeVisiable="changeVisiable"
    handleClickCancel() {
      this.$emit('changeVisiable', false)
    }
  }
}
</script>

<style lang="scss">
</style>
